<template>
  <div id="addScoringResultPage">
    <h2 style="margin-bottom: 32px; text-align: center">设置评分</h2>
    <a-form
      :model="scoringResultForm"
      style="max-width: 480px; margin: 0 auto"
      @submit="handleSubmit"
      auto-label-width
      lebal-align="left"
    >
      <a-form-item field="name" label="应用ID">
        {{ appId }}
      </a-form-item>
      <a-form-item field="post" label="结果名称">
        <a-input
          v-model="scoringResultForm.resultName"
          placeholder="请输入结果名称"
          :style="{ width: '320px' }"
          :defaultVisibility="true"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="post" label="结果描述">
        <a-input
          v-model="scoringResultForm.resultDesc"
          placeholder="请输入结果描述"
          :style="{ width: '320px' }"
          :defaultVisibility="true"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="name" label="结果图标">
        <picture-uploader
          biz="appIcon"
          :value="scoringResultForm.resultPicture"
          @change="handleUploadSuccess"
        ></picture-uploader>
      </a-form-item>
      <a-form-item field="resultProp" label="结果集">
        <a-input-tag
          v-model="scoringResultForm.resultProp"
          :style="{ width: '320px' }"
          placeholder="请输出结果集，按回车确认"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="resultScoreRange" label="结果得分范围">
        <a-input-number
          v-model="scoringResultForm.resultScoreRange"
          placeholder="请输入结果得分范围"
        />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary">提交</a-button>
      </a-form-item>
    </a-form>
    <h2 style="margin-bottom: 32px">评分管理</h2>
    <ScoringResultTable
      :do-update="doUpdate"
      :appId="appId"
      ref="tableRef"
    ></ScoringResultTable>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useLoginUserStore } from "@/store/userStore";
import API from "@/api";
import {
  addScoringResultUsingPost,
  editScoringResultUsingPost,
} from "@/api/scoringResultController";
import PictureUploader from "@/components/PictureUploader.vue";
import ScoringResultTable from "@/view/add/components/ScoringResultTable.vue";

/**
 * 表单信息
 */
const scoringResultForm = ref({
  resultDesc: "",
  resultName: "",
  resultPicture: "",
  resultProp: [],
  resultScoreRange: 0,
} as API.ScoringResultAddRequest);

const router = useRouter();
const loginUserStore = useLoginUserStore();

const updateId = ref<any>();
const doUpdate = (scoringResult: API.ScoringResultVO) => {
  updateId.value = scoringResult.id;
  scoringResultForm.value = scoringResult;
};

interface Props {
  appId: any;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return 0;
  },
});
// 处理上传成功后的回调
const handleUploadSuccess = (url: any) => {
  scoringResultForm.value.resultPicture = url; // 更新父组件中的 URL
};
/**
 * 提交表单
 * @param data
 */
const tableRef = ref();
const handleSubmit = async () => {
  if (!props.appId) {
    return;
  }
  let res: any;
  if (updateId.value) {
    res = await editScoringResultUsingPost({
      id: updateId.value,
      ...scoringResultForm.value,
    });
  } else {
    res = await addScoringResultUsingPost({
      appId: props.appId as any,
      ...scoringResultForm.value,
    });
  }
  if (res.data.code === 0) {
    message.success("操作成功");
  } else {
    message.error("操作失败，" + res.data.message);
  }
  if (tableRef.value) {
    tableRef.value.loadData();
    updateId.value = undefined;
  }
};
</script>
